<template>
  <div class="topoList">
    <Row :gutter="24" style="margin-bottom: 20px;">
      <Col span="4">
        <Button type="primary" @click="modal1 = true">新建TOPO图</Button>
      </Col>
      <Col span="3" push="2">
        <Button type="info" @click="reportTopo()">上报TOPO图</Button>
      </Col>
    </Row>
    <!-- 新建XML的弹层 -->
    <Modal v-model="modal1" class-name="vertical-center-modal" :mask-closable="false" width="620" title="新增TOPO图" @click="cancel">
      <div style="height: 30px;width: 100%;line-height: 30px;">
        <Col span="4"> 
          <span>Topo图名称：</span>
          </Col>
        <Col span="10"> 
          <Input placeholder="请输入Topo图名称" clearable v-model="save_DiagramIdName"/>                          
        </Col>
      </div>
      <!--添加Topo图 确定按钮 -->
      <div slot="footer">
          <Row :gutter="24" type="flex" justify="end">
            <Col span="3"> 
              <Button type="primary" @click="saveTopos()">确定</Button>
            </Col>
          </Row>
      </div>
    </Modal>
    <Table border :columns="columns" :data="topoData"></Table>
    <div style="margin-top: 10px;float: right;">
        <Page :total="dataCount" :page-size="pageSize" :current="currentPage" show-total @on-change="changepage" />
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import graphApi from "../../api/graph.api";
//生成大图ID的js
import {deviceTopoCode} from './resources/serialPort';
import { nowTime } from '../../libs/time.js'
//导入xml时用到的 id 和 name
import { sendImport_data } from './graph/Dialogs.js'

export default {
  name: "GraphList",
  data() {
    let self = this;
    return {
      // 分页
      ajaxHistoryData: [],
      dataCount:0,// 初始化信息总条数
      currentPage: 1, //当前页
      pageSize:10,// 每页显示多少条
      modal1: false,
      //传给 导入的时候参数调用 dialog.js 
      current_obj:{
        id: "",
        name: ""
      }, 
      reviewTime: nowTime(),
      save_DiagramIdName:"",
      diagramid:"",
      columns: [
        { title: "序号",type:"index",width: 70, align: "center"},
        { title: "ID",key: "id"},
        { title: "大图名称",key: "name"},
        { title: "操作人",key: "createUserName"},
        { title: "修改时间",key: "createTime"},
        { title: "操作",slot: "action",width: 200,
          render: (h, params) => {
            return h("div", [
              h("Button",{
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.onEdit(params.row.id, params.row.name);
                    }
                  }
              },"编辑"),
              h("Button",{
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      // 下载代码
                      // let href ="/static/xmls/" + params.row.id + "." + params.row.name + "./xml";
                      // let a = document.createElement("a");
                      // a.setAttribute("download", "");
                      // a.setAttribute("href", href);
                      // a.setAttribute("name", params.row.id + "." + params.row.name);
                      // a.click();
                    }
                  }
              },"下载"),
              h("Button",{
                  props: {
                    type: "error",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.onDelete(params.row.id);
                    }
                  }
              },"删除")
            ]);
          }
        }
      ],
      //列表数组
      topoData: [],
      page_Data: [] //分页的总数居
    };
  },
  created() {
    this.get_list(); //列表数据
  },
  computed: {},
  methods: {
    //分页
    //index当前页码
    changepage(index){
      this.page = index;
      var _start = (index - 1) * this.pageSize;
      var _end = index * this.pageSize;
      this.topoData = this.ajaxHistoryData.slice(_start, _end);
    },
    cancel() {
      this.$Message.info('Clicked cancel');
    },
    //保存到数据库
    saveTopos(){
      let name = this.save_DiagramIdName; //大图的名称
      console.log("大图的名称：", name);
      if(name){
        //调查询列表的接口
        graphApi.list().then(res => {
          var last_Max = res.data.data.length;
          // 自动生成的状态图id
          var _one = "00";
          var  _last = last_Max;
          _last++;
          var _maxNo = _last;
          _maxNo = _maxNo.toString(); //转为字符串
          this.diagramid = deviceTopoCode(_one,_maxNo);
          console.log("this.diagramid:", this.diagramid, _maxNo);
          axios.post(SAVE_URL, {
            nowTime: this.reviewTime,
            id: this.diagramid,
            name: name,
            xml: '<mxGraphModel dx="320" dy="514" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169"><root><mxCell id="0"/><mxCell id="1" parent="0"/></root></mxGraphModel>',
            userId:"0711000001",
            userName:"admin"
          }).then((res) => {
            console.log("创建保存成功:",res);
            if(res.status == "200"){
              this.$Message.success(res.data.msg);
              this.modal1 = false;
              this.get_list();//列表数据
            }
          }).catch((err)=>{})
        });
      }
    },
    //上报Topo图
    reportTopo(){

    },
    //列表数据
    get_list(){
      graphApi.list().then(response => {
        // this.topoData = response.data.data;
        // 保存取到的所有数据
        this.ajaxHistoryData = response.data.data;
        this.dataCount = response.data.data.length;
        // 初始化显示，小于每页显示条数，全显，大于每页显示条数，取前每页条数显示
        if (this.ajaxHistoryData.length < this.pageSize) {
          this.topoData = this.ajaxHistoryData;
        } else {
          this.topoData = this.ajaxHistoryData.slice(0, this.pageSize);
        }

      });
    },
    //编辑
    onEdit(id, name) {
      localStorage.removeItem('importObj');
      console.log("打开xml对应的id:", id, name);
      this.current_obj.id = id;
      this.current_obj.name = name;
      // console.log("this.current_obj:", this.current_obj);
      sendImport_data(this.current_obj); //传值到dialogs.js 
      this.$router.push("/grapheditor/" + id);
    },
    //删除
    onDelete(id) {
      graphApi.delete(id).then(res=>{
        if(res.status == '200'){
          this.$Message.success(res.data.msg);
          this.get_list();//列表数据
        }else{
          this.$Message.error(res.data.msg);
        }
      })
    }
  }
}

</script>
<style>
.topoList .ivu-page-prev, .ivu-page-item, .ivu-page-next { 
  min-width: 26px !important;
  height: 26px !important;
  line-height: 23px !important;
}
/* 弹层居中 */
.vertical-center-modal{
  display: flex;
  align-items: center;
  justify-content: center;   
}
.vertical-center-modal .ivu-modal{
  top: 0px;
}
</style>